<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <style>
        header{
            background-color: yellow;
        }
        main{
            background-color: red;
        }
        footer{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <alert-box>
            <template slot="header">
                你好
                <img src="/image/wallhaven-85po71_2560x1600.png" width="300px" height="200px" alt="">
            </template>

            和大家的撒

            <template slot="footer">
                我不好
                <img src="/image/wallhaven-85po71_2560x1600.png" width="300px" height="200px" alt="">
            </template>

        </alert-box>
       
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <script>

        Vue.component('alert-box',{
           data:function(){
                return{ 
                }
            },
            template:`<div>
                <header><slot name='header'>头部消息</slot></header>
                <main><slot>内容消息</slot></main>
                <footer><slot name='footer'>底部消息</slot></footer>
                </div>`,
            methods:{
            }

        });


        var vm=new Vue({
            el:'#app',
            data:{
               
            },
        });
    </script>
</body>
</html>
